<extend name="common/base" />
<block name="resource">
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/event.css"/>
    <link rel="stylesheet" href="__PUBLIC__/Home/ui3/css/eventList.css"/>
    <script src="__PUBLIC__/Home/ui3/js/web/scroll.js?v=1.0" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            $("#match-{$match.id}").addClass('active');
            ko.applyBindings(viewModel);
        });
        window.onload = function(){
            $('img.JS-lazyload').lazyload();
        };
    </script>
</block>
<block name="content">
<div class="main">
    <div class="main-left">
        <div class="main-left-box">
            <div class="left-title">
                <i class="event-icon"></i>
                <p>全部赛事</p>
            </div>
            <div class="event-list">
                <volist name="matchList" id="matchInfo">
                    <div class="event-list-item" id="match-{$matchInfo.id}">
                        <a href="{:U('Match/races', array('id' => $matchInfo['id']))}">
                            <div class="item-title"><div>{$matchInfo.title}</div></div>
                            <img class="JS-lazyload" src="__PUBLIC__/Home/ui3/images/lazyload-match.jpg" data-original="{$matchInfo['cover']}" alt="{$matchInfo.title}"/>
                            <div class="item-shadow"></div>
                        </a>
                    </div>
                </volist>
            </div>
        </div>
    </div>
    <div class="main-right">
        <div class="main-right-box">
            <div class="right-box-title">
                <div class="title-info">{$match.title}</div>
                <div class="back">
                    <a href="{:U('match/index')}">
                        <i class="back-icon"></i>
                        <span>返回赛事首页</span>
                    </a>
                </div>
            </div>
            <notempty name="races">
                <div class="event-hot">
                    <volist name="races" id="race">
                        <div class="item-box">
                            <div class="item-box-title">{$race.date}</div>
                            <div class="item-box-list">
                                <volist name="race.list" id="value">
                                    <div class="right-item">
                                        <notempty name="value.races">
                                            <a href="{:U('share/match', array('id' => $value['races'][0]))}">
                                        <else />
                                            <a href="javascript:void(0);">
                                        </notempty>
                                            <div class="right-item-head">
                                                <div class="game-logo">
                                                    <img class="JS-lazyload_1" src="__PUBLIC__/Home/ui3/images/lazyload-match.jpg" data-original="{$value['cover'] ? $value['cover'] : $value['match']['cover']}" alt="{$value.title}"/>
                                                </div>
                                                <div class="game-info">
                                                    <span class="game-title">{$value.game.name}</span>
                                                    <span class="game-time game-time1"></span>
                                                    <span class="game-time game-time2"></span>
                                                </div>
                                            </div>
                                            <div class="right-item-content">
                                                <div class="right-team1">
                                                    <div class="right-team1-logo">
                                                        <img src="{$value['team'][0]['logo']}" alt="{$value['team'][0]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$value['team'][0]['name']}</div>
                                                </div>
                                                <div class="game-score ">
                                                    <div class="score-num">
                                                        <a class="num1">{$value['score'][0]}<div class="hr"></div></a>
                                                        <a class="num">:</a>
                                                        <a class="num2">{$value['score'][1]}<div class="hr"></div></a>
                                                    </div>
                                                    <div class="schedule">
                                                        <foreach name="value.races" item="vo" key="k">
                                                            <if condition="$k egt 3">
                                                                <a href="{:U('share/match', array('id' => $value['races'][0]))}">...</a>
                                                            <else />
                                                                <a href="{:U('share/match', array('id' => $vo))}">{$k+1}</a>
                                                            </if>
                                                        </foreach>
                                                    </div>
                                                </div>
                                                <div class="right-team2">
                                                    <div class="right-team1-logo">
                                                        <img src="{$value['team'][1]['logo']}" alt="{$value['team'][1]['name']}"/>
                                                    </div>
                                                    <div class="team-name1">{$value['team'][1]['name']}</div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </volist>
                            </div>
                        </div>
                    </volist>
                </div>
            <else />
                <!--类null-state为空状态-->
                <div class="content-right-item-null ">
                    <div class="null-img"></div>
                    <div class="null-info">暂时没有比赛</div>
                </div>
            </notempty>
        </div>
    </div>
</div>
<script type="text/javascript">
    $('.JS-lazyload').lazyload();
    $('.JS-lazyload_1').lazyload();
</script>
</block>